<template>
  <div class="fenxiao-order-detail">
    <main>
      <p class="fenxiao-order-number">订单号：{{orderDetail.order_no}}</p>
      <div class="fenxiao-order-detail-lists">
        <div
          class="fenxiao-order-detail-lists-main"
          v-for="(item, index) in orderDetail.item"
          :key="index"
        >
          <div class="fenxiao-order-detail-lists-main-img">
            <img @click="JumpUrl(item.link)" :src="item.file_path" alt />
          </div>
          <div class="fenxiao-order-detail-lists-main-con">
            <div class="fenxiao-order-detail-lists-main-con-title">{{item.title}}</div>
            <div
              v-if="item.property"
              class="fenxiao-order-detail-lists-main-con-size"
            >{{item.property}}</div>
            <div class="fenxiao-order-detail-lists-main-con-price">
              <span class="total">
                <em>{{mSymbol.name}}</em>
                <i class="int">{{getPriceInt(item.price)}}</i>
                <i class="dot">{{getPriceDot(item.price)}}</i>
              </span>
              <b>x{{item.num}}</b>
            </div>
          </div>
        </div>
      </div>
      <div class="fenxiao-order-detail-total">
        <div class="fenxiao-order-total">
          商品小计：
          <span class="total">
            <i>{{mSymbol.name}}</i>
            <i class="int">{{getPriceInt(orderDetail.total_price)}}</i>
            <i>{{getPriceDot(orderDetail.total_price)}}</i>
          </span>
        </div>
        <div
          v-if="orderDetail.first_remission_price > 0"
          class="fenxiao-order-total"
        >首单立减：&yen;{{orderDetail.first_remission_price}}</div>
        <div v-if="subtract_msg" class="fenxiao-order-total">满减优惠：{{subtract_msg}}</div>
        <div class="fenxiao-order-total" v-html="getFare()"></div>
        <div
          v-if="orderDetail.tax_fee > 0 || orderDetail.tax_invoice_fee > 0"
          class="fenxiao-order-total"
        >{{taxes_alias}}：{{mSymbol.name}}{{orderDetail.tax_rate}}</div>
        <div
          v-if="orderDetail.user_coupon_title"
          class="fenxiao-order-total"
        >使用优惠券：- &yen;{{orderDetail.user_coupon_value}}</div>
        <div
          v-if="orderDetail.coupon_code_fee"
          class="fenxiao-order-total"
        >使用优惠码：- &yen;{{orderDetail.coupon_code_fee}}</div>
        <div
          v-if="orderDetail.coupon_repurchase_price"
          class="fenxiao-order-total"
        >复购优惠 ：- {{mSymbol.name}}{{orderDetail.coupon_repurchase_price}}</div>
        <div class="fenxiao-order-total" v-if="orderDetail.point_fee">
          积分抵现：
          <span class="total">
            <em v-html="getMoneyIcon()"></em>
            <em>{{orderDetail.point_fee}}</em>
          </span>
        </div>
        <div class="fenxiao-order-total" v-if="orderDetail.virtual_currency_fee > 0 && !only_sapp">
          虚拟币抵现：
          <span class="total">
            <em v-html="getMoneyIcon()"></em>
            <em>{{orderDetail.virtual_currency_fee}}</em>
          </span>
        </div>
        <div class="fenxiao-order-total">
          <span v-if="orderDetail.is_presale != 1">实际支付：</span>
          <span v-else-if="orderDetail.presale_status != 2">应付金额：</span>
          <span class="total">
            <i v-html="getMoneyIcon()"></i>
            <i class="int">{{getPriceInt(orderDetail.payment)}}</i>
            <i>{{getPriceDot(orderDetail.payment)}}</i>
          </span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Vue from 'vue'
import { getDlsSaleRewardOrderDetail } from '@/api/user/dls/dlsApi'
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  data() {
    return {
      is_app: null,
      subtract_msg: '',
      taxes_alias: '',
      only_sapp: null,
      orderDetail: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const order_id = this.$route.query.order_id
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getDlsSaleRewardOrderDetail({ order_id }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.is_app = res.data.is_app
          this.orderDetail = res.data.order_detail
          this.subtract_msg = res.data.subtract_msg
          this.taxes_alias = res.data.taxes_alias
          this.only_sapp = res.data.only_sapp
        } else {
          this.$Error(res.msg)
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    JumpUrl(url) {
        openPage(url)
    },
    getPriceInt(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(0, idx) : price
      } else {
        return '0'
      }
    },
    getPriceDot(price) {
      if (price) {
        const idx = price.indexOf('.')
        return idx !== -1 ? price.substr(idx) : '.00'
      } else {
        return '.00'
      }
    },
    getFare() {
      if (this.orderDetail.freight_collect_fee > 0) {
        return `运费：${this.mSymbol.name}${this.orderDetail.freight_collect_fee} (到付)`
      } else if (this.orderDetail.post_fee && this.orderDetail.post_fee != 0) {
        if (this.orderDetail.pay_type == 5) {
          return `运费：&dollar;${this.orderDetail.post_fee}`
        } else {
          return `运费：${this.mSymbol.name}${this.orderDetail.post_fee}`
        }
      } else {
        return `运费：${this.mSymbol.name}0.00`
      }
    },
    getMoneyIcon() {
      return this.orderDetail.pay_type == 5 ? '&dollar;' : `${this.mSymbol.name}`
    }
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import "src/styles/mixin";
.fenxiao-order-detail {
  header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    line-height: 88px;
    background: $default;
    text-align: center;
    font-size: 32px;
    color: #4b4b4b;
    background-color: #fff;
    i {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 66px;
      height: 100%;
    }
  }
  main {
    width: 710px;
    margin: 20px 20px 0;
    border-radius: 20px;
    overflow: hidden;
    .fenxiao-order-number {
      height: 72px;
      line-height: 72px;
      background-color: $default;
      padding: 0px 20px;
      font-size: 28px;
    }
    .fenxiao-order-detail-lists {
      background-color: $default;
      border-top: 2px solid #f5f5f5;
      &-main {
        padding: 18px 20px;
        overflow: hidden;
        border-bottom: 2px solid #f5f5f5;
        &-img {
          width: 22%;
          float: left;
          background-color: $default;
          border-radius: 6px;
          overflow: hidden;
          img {
            width: 100%;
            border-radius: 6px;
          }
        }
        &-con {
          float: left;
          margin-left: 4%;
          width: 74%;
          &-title {
            // margin-top: 6px;
            color: #333;
            font-weight: bold;
            @include lineClamp(24px, 36px, 2);
          }
          &-size {
            color: #999;
            margin-top: 6px;
          }
          &-price {
            margin-top: 20px;
            span {
              color: $warning;
              font-size: 0;
              em,
              i {
                font-size: 24px;
                font-weight: bold;
                &.int {
                  font-size: 32px;
                }
              }
            }
            b {
              float: right;
              color: #999;
              font-size: 26px;
              line-height: 36px;
            }
          }
        }
      }
    }
    .fenxiao-order-detail-total {
      background-color: $default;
      padding: 12px 0;
      .fenxiao-order-total {
        padding: 10px 20px;
        text-align: right;
        font-size: 28px;
        .total {
          font-size: 0;
          i {
            font-size: 28px;
            color: $warning;
            &.int {
              font-size: 28px;
            }
          }
          em {
            font-size: 28px;
          }
        }
      }
    }
  }
}
</style>